<template>
    <div>
        <div class="nav acea-row row-between row-middle" :class="[isBackGroundColor ? 'bg' :'']">
            <svg viewBox="0 0 1000 1000" class="nav-back" v-show="isShowBack && !isBackGroundColor" @click="back">
                <path fill="#FFFFFF" fill-rule="evenodd"
                      d="M296.114 508.035c-3.22-13.597.473-28.499 11.079-39.105l333.912-333.912c16.271-16.272 42.653-16.272 58.925 0s16.272 42.654 0 58.926L395.504 498.47l304.574 304.574c16.272 16.272 16.272 42.654 0 58.926s-42.654 16.272-58.926 0L307.241 528.058a41.472 41.472 0 0 1-11.127-20.023z"></path>
            </svg>
            <svg t="1594104342867" class="icon nav-back" v-show="isShowBack && isBackGroundColor" @click="back" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                 p-id="1559" width="30" height="30">
                <path d="M736 960c-9 0-18.1-3.2-25-9.6L263 535.2c-13.8-12.8-13.8-33.6 0-46.4L711 73.6c13.8-12.8 36.2-12.8 50 0 13.8 12.8 13.8 33.6 0 46.4L338 512l423 392c13.8 12.8 13.8 33.6 0 46.4-6.9 6.4-16 9.6-25 9.6z"
                      p-id="1560" fill="#42455F"></path>
            </svg>
            <div class="nav-right" v-show="!isShowSearch"></div>
            <div class="nav-title">{{title}}</div>
            <div class="nav-right" v-show="!isShowSearch"></div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "NavBar",
        props: {
            isShowBack: {
                type: Boolean,
                default: true,
            },
            title: {
                type: String,
                required: true
            },
            isShowSearch: {
                type: Boolean,
                default: false,
                required: true
            },
            isBackGroundColor: {
                type: Boolean,
                default: false,
                required: true
            }
        },
        data() {
            return {}
        },
        methods: {
            back() {
                this.$router.go(-1)
            }
        }
    }
</script>

<style scoped lang="scss">
    .nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background-color: #0DCDB5;
        height: 45px;
        padding: 0 10px;
        z-index: 5;
        color: #fff;
        .nav-title {
            text-transform: capitalize;
            font-weight: 500;
            font-size: 20px;
            text-align: center;
        }

        .nav-right {
            flex: 1;
        }

        .nav-back {
            width: 17px;
            height: 17px;
        }

        .search-box {
            height: 32px;
            background-color: rgba(0, 0, 0, .2);
            border-radius: 17px;
            padding: 0 10px;

            .search-text {
                font-size: 12px;
                font-weight: 500;
                color: #ffffff;
                margin-left: 3px;
            }
        }
    }

    .bg {
        background-color: #ffffff;
        color: #42455F;
    }
</style>
